<template>
	<view class="product-item" :key="index">
		<image class="product-image" :src="product.image" mode="aspectFill"></image>
		<view class="product-info">
			<view class="item-info-title">
				<text>{{ product.title }}</text>
			</view>
			<view class="item-info-price">
				<text>{{ product.infoText }}</text>
				<text class="price">￥{{ product.price }}</text>
			</view>
			<view class="item-info-merchant">
				<image :src="product.merchantImage" mode="aspectFill"></image>
				<view class="">
					{{ product.merchantName }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			product: {
				type: Object,
				default: () => ({})
			}
		}
	};
</script>

<style lang="less" scoped>
	.tab-container {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 30rpx 0;
			cursor: pointer;
			position: relative;
			display: flex;
			justify-content: center;

			&.tab-item-active {
				color: #f76e00;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60%;
					height: 4rpx;
					background-color: #f76e00;
				}
			}
		}
	}

	.content {
		padding: 20rpx;
	}

	.product {
		padding-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350rpx, 1fr));
		grid-gap: 20rpx;
		justify-items: center;

		.product-item {
			border-radius: 20rpx;
			overflow: hidden;
			width: 350rpx;
			height: 515rpx;
			background-color: #fff;

			.product-image {
				width: 100%;
				height: 350rpx;
			}

			.product-info {
				padding: 10rpx 20rpx;

				.item-info-title {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.item-info-price {
					color: #7b7b7b;
					font-size: 26rpx;
					padding: 10rpx 0;

					.price {
						margin-left: 10rpx;
						color: #f76e00;
					}
				}

				.item-info-merchant {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #7b7b7b;

					image {
						width: 35rpx;
						height: 35rpx;
						border-radius: 100%;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>